<template>
  <div class="info">
    <h1>人员管理</h1>
    <el-row>
      <el-col :span="20"
              :push="2">
        <div>
          <el-form :inline="true">
            <el-form-item style="float: left"
                          label="查询学生信息:">
              <el-input v-model="keyStudent"
                        placeholder="学生姓名......"></el-input>
            </el-form-item>
            <el-form-item style="float: right">
              <el-button type="primary"
                         size="small"
                         icon="el-icon-edit-outline"
                         @click="hanldeAdd()">添加</el-button>
            </el-form-item>
          </el-form>
        </div>
        <div class="table">
          <el-table :data="searchStudentInfo(keyStudent)"
                    border
                    style="width: 100%">
            <el-table-column type="index"
                             label="序号"
                             align="center"
                             width="60">
            </el-table-column>
            <el-table-column label="识别码"
                             align="center"
                             width="230">
              <template slot-scope="scope">
                <span>{{ scope.row._id }}</span>
                <br />
                <el-button size="mini"
                           type="text"
                           @click="
                    qrDialogVisible = true
                    qrInfo = `${scope.row.pinyin},${scope.row.sno},${scope.row._id};`
                    qrDialogTitle = '识别码'
                  ">二维码</el-button>
              </template>
            </el-table-column>
            <el-table-column label="姓名"
                             align="center"
                             width="120">
              <template slot-scope="scope">
                <span>{{ `${scope.row.name}(${scope.row.pinyin})` }}</span>
              </template>
            </el-table-column>
            <el-table-column label="学号"
                             align="center"
                             width="120">
              <template slot-scope="scope">
                <span>{{ scope.row.sno }}</span>
              </template>
            </el-table-column>
            <el-table-column label="班级"
                             align="center"
                             width="120">
              <template slot-scope="scope">
                <span>{{ scope.row.classes }}</span>
                <br />
                <el-button size="mini"
                           type="text"
                           @click="
                    qrDialogVisible = true
                    qrInfo = `${scope.row.school} ${scope.row.classes}`
                    qrDialogTitle = '班级'
                  ">二维码</el-button>
              </template>
            </el-table-column>
            <el-table-column label="学校"
                             align="center"
                             width="140">
              <template slot-scope="scope">
                <span>{{ scope.row.school }}</span>
              </template>
            </el-table-column>
            <el-table-column label="操作"
                             fixed="right">
              <template slot-scope="scope">
                <el-button size="mini"
                           @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
                <el-button size="mini"
                           type="danger"
                           @click="handleDelete(scope.$index, scope.row)">删除</el-button>
              </template>
            </el-table-column>
          </el-table>
        </div>
      </el-col>
    </el-row>
    <AddUser :dialogAdd.sync="dialogAdd"
             @update="getStudentInfo"></AddUser>
    <EditUser :dialogEdit.sync="dialogEdit"
              :formData.sync="formData"
              @updateEdit="getStudentInfo"></EditUser>
    <el-dialog :title="qrDialogTitle"
               :visible.sync="qrDialogVisible"
               width="20%"
               center>
      <vue-qr :text="qrInfo" />
    </el-dialog>
  </div>
</template>

<script>
import AddUser from './AddUser.vue'
import EditUser from './EditUser.vue'
import VueQr from 'vue-qr'
import axios from '../axios.js'
import store from '../store'
export default {
  name: 'UserInfo',
  components: {
    AddUser,
    EditUser,
    VueQr,
  },
  data () {
    return {
      tableData: [],
      dialogEdit: {
        show: false,
      },
      dialogAdd: {
        show: false,
      },
      keyStudent: '',
      formData: {
        // 编辑信息
        name: '',
        sno: '',
        classes: '',
        school: '',
      },
      qrDialogVisible: false,
      qrDialogTitle: '',
      qrInfo: '',
    }
  },
  methods: {
    getStudentInfo () {
      axios.getStudentInfo(store.state.username).then((res) => {
        console.log(res)
        if (res.data.status == 0) {
          this.tableData = res.data.data
        }
      })
    },
    hanldeAdd () {
      // 添加
      this.dialogAdd.show = true
    },
    handleEdit (index, row) {
      // 编辑
      this.dialogEdit.show = true
      this.formData = {
        name: row.name,
        sno: row.sno,
        classes: row.classes,
        school: row.school,
        student_id: row._id,
      }
      console.log(row)
    },
    handleDelete (index, row) {
      // 删除学生入信息
      axios.delStudentInfo(row._id).then((res) => {
        this.$message({
          type: 'success',
          message: '删除信息成功',
        })
        this.getStudentInfo(store.state.username) // 删除数据，更新视图
      })
    },
    searchStudentInfo (keyStudent) {
      return this.tableData.filter((student) => {
        if (student.name.includes(keyStudent)) {
          return student
        }
      })
    },
  },
  created () {
    this.getStudentInfo(store.state.username)
  },
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h1 {
  font-size: 30px;
  color: #333;
  text-align: center;
  margin: 0 auto;
  margin-bottom: 20px;
  padding-bottom: 5px;
  border-bottom: 2px solid #409eff;
  width: 220px;
}
</style>
